<template>
  <view class="recruit-detail">
    <!-- 收藏按钮 -->
    <RecruitFavoriteButton 
      :isFavorite="isFavorite"
      @toggle="handleFavorite"
    />
    
    <!-- 岗位信息 -->
    <view v-if="recruitInfo" class="recruit-detail__content">
      <!-- 基本信息 -->
      <RecruitBasicInfo :recruitInfo="recruitInfo" />
      
      <!-- 岗位描述 -->
      <RecruitSection 
        title="岗位描述" 
        :content="recruitInfo.description" 
      />
      
      <!-- 岗位要求 -->
      <RecruitSection 
        title="岗位要求" 
        :content="recruitInfo.requirements" 
        :isPreLine="true" 
      />
      
      <!-- 福利待遇 -->
      <RecruitSection 
        title="福利待遇" 
        :content="recruitInfo.benefits" 
        :isPreLine="true" 
      />
      
      <!-- 工作地点 -->
      <RecruitSection 
        title="工作地点" 
        :content="recruitInfo.location" 
      />
      
      <!-- 联系方式 -->
      <RecruitSection 
        title="联系方式" 
        :content="recruitInfo.contact" 
      />
    </view>
    
    <!-- 加载中 -->
    <view v-else-if="loading" class="recruit-detail__loading">
      <text>加载中...</text>
    </view>
    
    <!-- 加载失败 -->
    <view v-else class="recruit-detail__error">
      <text>加载失败，请重试</text>
      <button class="recruit-detail__error-btn" @click="fetchRecruitDetail">重新加载</button>
    </view>
    
    <!-- 底部操作栏 -->
    <RecruitFooter @apply="goToApply" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';

// 导入组件
import RecruitBasicInfo from '@/components/recruit/RecruitBasicInfo.vue';
import RecruitSection from '@/components/recruit/RecruitSection.vue';
import RecruitFooter from '@/components/recruit/RecruitFooter.vue';
import RecruitFavoriteButton from '@/components/recruit/RecruitFavoriteButton.vue';

// 初始化store
const store = useStore();

// 获取页面参数
const recruitId = ref(null);

// 计算属性：详情加载状态
const loading = computed(() => store.getters['recruit/detailLoading']);

// 计算属性：招聘岗位详情
const recruitInfo = computed(() => store.getters['recruit/getRecruitDetail']);

// 计算属性：用户收藏列表
const userFavorites = computed(() => store.getters['recruit/getUserFavorites']);

// 计算是否已收藏
const isFavorite = computed(() => {
  return userFavorites.value.some(fav => fav.recruitId === recruitId.value);
});

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  
  if (options.id) {
    recruitId.value = parseInt(options.id);
    fetchRecruitDetail();
    store.dispatch('recruit/fetchUserFavorites');
  } else {
    uni.showToast({
      title: '参数错误',
      icon: 'none'
    });
    setTimeout(() => {
      goBack();
    }, 1500);
  }
});

// 获取岗位详情
const fetchRecruitDetail = async () => {
  if (!recruitId.value) return;
  
  try {
    const result = await store.dispatch('recruit/fetchRecruitDetail', recruitId.value);
    
    if (!result.success) {
      uni.showToast({
        title: result.message || '获取岗位详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取岗位详情失败', error);
    uni.showToast({
      title: '获取岗位详情失败',
      icon: 'none'
    });
  }
};



// 获取岗位类型名称
const getTypeName = (type) => {
  const typeMap = {
    1: '社团招新',
    2: '活动招募',
    3: '志愿者岗位'
  };
  return typeMap[type] || '其他';
};

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 收藏/取消收藏
const handleFavorite = async () => {
  if (!recruitId.value) return;
  
  try {
    const result = await store.dispatch('recruit/toggleFavorite', {
      id: recruitId.value,
      isFavorite: isFavorite.value
    });
    
    if (result.success) {
      uni.showToast({
        title: result.message,
        icon: 'success'
      });
    } else {
      uni.showToast({
        title: result.message || '操作失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('收藏操作失败', error);
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none'
    });
  }
};

// 跳转到申请页面
const goToApply = () => {
  if (!recruitId.value) return;
  
  uni.navigateTo({
    url: `/pages/recruit/apply?id=${recruitId.value}`
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.recruit-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 80px;
  
  &__content {
    padding: 16px;
  }
  
  &__loading, &__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #999;
    font-size: 14px;
  }
  
  &__error-btn {
    margin-top: 16px;
    background-color: #1890ff;
    color: #ffffff;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 4px;
  }
}
</style>
